<template>
<!--  模型添加页面-->
  <div class="container">
    <div v-show="!left_hidden" class="column column-left">
      <!-- 左侧栏内容 -->
      <div class="column-left__title">
        <div>已有模型</div>
      </div>

      <div class="column-left__modellist">
        <el-table
          :data="modelData"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
          max-height="60vh"
          height="60vh"
        >
          <el-table-column prop="ID" label="ID" width="80"></el-table-column>
          <el-table-column prop="modelname" label="模型名称"></el-table-column>
          <el-table-column prop="savetime" label="添加时间"></el-table-column>

          <!--            <el-table-column label="操作" style="" >-->
          <!--              <template #default="scope">-->
          <!--                <el-button style="border-radius: 4px" class="" @click="handleEdit(scope.row)">详情</el-button>-->
          <!--              </template>-->
          <!--            </el-table-column>-->
        </el-table>
      </div>
    </div>

    <div class="column column-right">
      <!--      <button class="column-left__modellist__button" @click="hidden_button">{{hidden__button}}</button>-->
      <!-- 右侧表单 -->
      <div class="column-right__title">
        <span style="border-bottom: 1px solid #606266">参数表单</span>
      </div>

      <div class="column-right__form">
        <div style="display: flex" class="column-right__form__div">
          <label>模型类别：</label>

          <el-select v-model="selection" style="width: 120px">
            <el-option
              v-for="(model, index) in modeltype"
              :key="index"
              :label="model.modelname"
              :value="model.modelname"
              @click="handle(index)"
            ></el-option>
          </el-select>

          <!--          <el-dropdown split-button placement="top-start" trigger="click" size="default" style="align-items: center;height: 32px">-->
          <!--            {{ this.selection }}-->
          <!--            <template #dropdown>-->
          <!--              <el-dropdown-menu style="">-->
          <!--                <el-dropdown-item v-for="(model, index) in modeltype" :key="index" @click="handle(index)">-->
          <!--                  {{ model.modelname }}-->
          <!--                </el-dropdown-item>-->
          <!--              </el-dropdown-menu>-->
          <!--            </template>-->
          <!--          </el-dropdown>-->
        </div>
        <div style="display: flex" class="column-right__form__div">
          <label>模型名称：</label>
          <el-input
            v-model="form.model_name"
            resize="none"
            placeholder="模型名称"
            type="textarea"
            :rows="1"
          />
        </div>

        <div style="display: flex" class="column-right__form__div">
          <label>模型介绍：</label>
          <el-input
            v-model="form.model_intro"
            resize="none"
            placeholder="模型介绍"
            type="textarea"
            :rows="6"
          />
        </div>

        <div style="display: flex">
<!--          <label style="width: 100px;white-space: nowrap;display: flex">设置参数：</label>-->

          <div class="flex ">

            <div v-if="jsonFile!==null" class="param__area">
              <el-table
                  :data="fakedata"
                  max-height="550px"
                  border
                  style="
                width: 90%;
                margin-bottom: 0;
                border-bottom: none;
                border-radius: 4px 4px 0 0;
              "
              >
                <el-table-column label="参数符号">
                  <template #default>
                    <div>
                      <el-input
                          v-model="param_name"
                          resize="none"
                          placeholder="填写参数符号"
                          type="textarea"
                      />
                      <!--                <input v-model="param_name" type="text" placeholder="参数符号">-->
                    </div>
                  </template>
                </el-table-column>

                <el-table-column label="参数说明">
                  <template #default>
                    <div>
                      <el-input
                          v-model="param_explain"
                          resize="none"
                          placeholder="填写参数说明"
                          type="textarea"
                      />
                      <!--                <input v-model="param_explain" type="text" placeholder="参数说明">-->
                    </div>
                  </template>
                </el-table-column>

                <el-table-column label="默认值">
                  <template #default>
                    <div>
                      <el-input
                          v-model="param_defaultValue"
                          resize="none"
                          placeholder="填写默认值"
                          type="textarea"
                      />
                      <!--                <input v-model="param_defaultValue" type="text" placeholder="默认值">-->
                    </div>
                  </template>
                </el-table-column>

                <el-table-column label="单位">
                  <template #default>
                    <div>
                      <el-input
                          v-model="param_unit"
                          resize="none"
                          placeholder="填写单位"
                          type="textarea"
                      />
                      <!--                <input v-model="param_unit" type="text" placeholder="单位">-->
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template #default>
                    <div>
                      <el-button
                          size="default"
                          @click="addKeyValue"
                          style="width: 60%; border: 1px solid #409eff"
                      >添加</el-button
                      >
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <el-table
                  :data="model_ParaIntro"
                  height="400px"
                  max-height="550px"
                  border
                  :show-header="false"
                  style="width: 90%; border-radius: 0 0 4px 4px"
              >
                <el-table-column>
                  <template #default="{ row }">
                    <el-input
                        v-if="row.isEditing"
                        v-model="row.param_name"
                        type="text"
                    ></el-input>
                    <span v-else>{{ row.param_name }}</span>
                  </template>
                </el-table-column>
                <el-table-column>
                  <template #default="{ row }">
                    <el-input
                        v-if="row.isEditing"
                        v-model="row.param_explain"
                        type="text"
                    ></el-input>
                    <span v-else>{{ row.param_explain }}</span>
                  </template>
                </el-table-column>
                <el-table-column>
                  <template #default="{ row }">
                    <el-input
                        v-if="row.isEditing"
                        v-model="row.param_defaultValue"
                        type="text"
                    ></el-input>
                    <span v-else>{{ row.param_defaultValue }}</span>
                  </template>
                </el-table-column>
                <el-table-column>
                  <template #default="{ row }">
                    <el-input
                        v-if="row.isEditing"
                        v-model="row.param_unit"
                        type="text"
                    ></el-input>
                    <span v-else>{{ row.param_unit }}</span>
                  </template>
                </el-table-column>
                <el-table-column>
                  <template #default="{ row, $index }">
                    <el-button
                        style="width: 40%; border: 1px solid #409eff"
                        @click="editKeyValue($index)"
                    >{{ row.isEditing ? "保存" : "编辑" }}</el-button
                    >
                    <el-button
                        style="width: 40%; border: 1px solid #409eff"
                        @click="deleteKeyValue($index)"
                    >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>

            </div >


            <button v-if="jsonFile!==null" class="resetUpload ml20">重新上传</button>
          </div>
<!--        <el-upload-->
<!--            v-if="!jsonFile"-->
<!--            ref="upload"-->
<!--            class=""-->
<!--            :show-file-list="false"-->
<!--            before-upload=""-->
<!--            accept=".json"-->
<!--            action=""-->
<!--            :on-change="handleUploadParam"-->
<!--        >-->
<!--          <div class="upload-json" >-->
<!--            <span>-->
<!--              上传参数-->
<!--            </span>-->
<!--          </div>-->
<!--        </el-upload>-->
        </div>
        <div style="display: flex">
          <label>上传附件：</label>
          <el-upload
            ref="upload"
            class=""
            :show-file-list="false"
            :before-upload="beforeUpload7z"
            action=""
            :on-change="handleUploadChange7z"
          >
            <img
              v-if="file1 === '' && isFormValid"
              style=""
              src="../../assets/model-add-icons/upfiles.png"
             alt=""/>
          </el-upload>
          <img
            @click="disableUpload"
            v-if="file1 === '' && !isFormValid"
            style=""
            src="../../assets/model-add-icons/upfiles.png"
           alt=""/>
          <div
            v-if="file1 !== '' && isFormValid"
            style="position: relative; display: flex; flex-direction: column"
          >
            <el-icon
              @click="clear7z"
              style="
                cursor: pointer;
                background-color: #e23e57;
                color: white;
                position: absolute;
                top: 0;
                right: 20px;
                border-radius: 50%;
              "
            >
              <Close></Close>
            </el-icon>
            <img style="width: 50px; height: 50px" :src="file1"  alt=""/>
            <span
              style="
                overflow: hidden;
                width: 80px;
                height: 20px;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ selectedFiles7z[0].name }}
            </span>
          </div>
        </div>

        <div style="display: flex">
          <label>上传代码：</label>
          <el-upload
            ref="upload"
            class=""
            :show-file-list="false"
            :before-upload="beforeUploadcode"
            :http-request="uploadFile_"
            action=""
            :on-change="handleUploadChangecode"
            v-if="file2 === '' && isFormValid"
          >
            <img style="" src="../../assets/model-add-icons/upfiles.png"  alt=""/>
          </el-upload>
          <img
            @click="disableUpload"
            v-if="!isFormValid"
            style=""
            src="../../assets/model-add-icons/upfiles.png"
           alt=""/>
          <div
            v-else-if="file2 !== '' && isFormValid"
            style="position: relative; display: flex; flex-direction: column"
          >
            <el-icon
              @click="clearcode"
              style="
                cursor: pointer;
                background-color: #e23e57;
                color: white;
                position: absolute;
                top: 0;
                right: 20px;
                border-radius: 50%;
              "
            >
              <close></close>
            </el-icon>
            <img
              v-if="file2 !== ''"
              style="width: 50px; height: 50px"
              :src="file2"
             alt=""/>
            <span
              style="
                overflow: hidden;
                width: 80px;
                height: 20px;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
              >{{
                selectedFilescode.length > 0 ? selectedFilescode[0].name : ""
              }}
            </span>
          </div>
        </div>

        <div style="display: flex">
          <label>访问权限：</label>

          <el-switch
            v-model="limits"
            class="ml-2"
            width="60"
            inline-prompt
            active-text="公有"
            inactive-text="私有"
          />
        </div>

        <div style="display: flex">
          <label>下载示例：</label>
          <div class="download_select flex flex-column">
            <k-select background="#EEEEEE" activeBackground="#79BBFF" :options="options" :selectedIndex="selectedIndex"  @changeIndex="changeIndex"  ></k-select>
            <el-button
                @click="downloadFile(selectedIndex)"
                style="border: 1px solid #409eff"
            >下载</el-button
            >
          </div>

        </div>
      </div>
      <div class="column-right-bottom__button">
        <el-button @click="clearall">清空</el-button>
        <!--        <el-button @click="submitform" :disabled="!checkform(1)">提交</el-button>-->
        <el-button @click="submitform">提交</el-button>
      </div>
      <!-- <div class="waitTool">
        <el-alert
          title="正在验证，请等待..."
          type="warning"
          close-text="x"
          center
          >
        </el-alert>
      </div> -->
      
    </div>
  </div>
</template>

<script setup>
import { Close } from "@element-plus/icons-vue";
</script>
<script>
import modelListData from "@/data1/modelListData";
import router from "@/router";
import { dayjs } from "element-plus";
import {  ElMessageBox } from "element-plus";
export default {
  props: {
    baseUrl: {
      type: String,
    },
  },
  data() {
    return {
      jsonFile:null,
      options:["单一python","回转python","单一c","回转c"],
      selectedIndex:0,
      modeltype: [{ modelname: "单一容器" }, { modelname: "回转分区" }],
      selection: "请选择",
      modelData: modelListData,
      hidden__button: "扩大",
      left_hidden: true,
      param_name: "",
      param_explain: "",
      param_defaultValue: "",
      param_unit: "",
      form: {
        // model_ParaIntro: [], // 声明空数组
      },
      model_ParaIntro: [],
      fakedata: [
        {
          param_name: "1",
          param_explain: "1",
          param_defaultValue: "1",
          param_unit: "1",
          isEditing: false,
        },
      ],
      selectedFiles7z: [], // 已选附件文件列表
      selectedFilescode: [], //已选代码文件
      file1: "",
      file2: "",
      code_type: "",
      visible: false, //下载示例的pop
      username: "",
      limits: true,
      IsPrivate: "No",
      isShowWait: false,
    };
  },

  created() {},
  mounted() {
    this.username = localStorage.getItem("username");
    this.open();
  },
  computed: {
    isFormValid() {
      return true;
      // // 在这里调用 checkform 方法并返回其返回值
      // const result = this.checkform(1);
      // // const result =true;
      // return result;
    },
  },
  components: {},
  methods: {


    changeIndex(index){
      this.selectedIndex =index
      console.log(" this.selectedIndex:",this.selectedIndex);

    },
    open() {
      ElMessageBox.alert(
        "请先下载示例代码，" +
          "                然后按照代码约束规范上传代码提交模型添加申请",
        "提示：",
        {
          confirmButtonText: "OK",
          callback: () => {},
        },
      );
    },
    handle(item) {
      this.selection = this.modeltype[item].modelname;
      this.form.model_type = this.selection;
    },
    async downloadFile(item) {
      let model_type = "";
      if(item ===0 ){
        model_type = "py单一容器";
      }
      else if (item === 1) {
        model_type = "py回转分区";
      }
      else if(item ===2){
        model_type = "c单一容器"
      }
      else {
        model_type = "c回转分区"
      }
      const formData = new FormData();
      formData.append("model_type", model_type);
      await fetch(this.baseUrl + "/download/uploadCodeFile", {
        method: "POST",
        body: formData,
      })
        .then((response) => response.blob())
        .then((blob) => {
          const url = URL.createObjectURL(blob);
          const link = document.createElement("a");
          link.href = url;
          // link.download = this.revolve_caculate_info_clone.id+"/"+dayjs().format('YYYY-MM-DD-HH:mm:ss')+ '.json';
          link.download = model_type + "代码示例" + ".py";

          link.click();
        })
        .catch((error) => {
          console.error("文件下载失败:", error);
        });
      this.visible = false;
    },
    // 一键清除
    clearall() {
      this.file1 = "";
      this.file2 = "";
      this.form = {};
      this.selectedFiles7z = [];
      this.selectedFilescode = [];
      this.model_ParaIntro = [];
      this.selection = "请选择";
    },
    // 叉叉1
    clear7z() {
      this.selectedFiles7z = [];
      this.file1 = "";
    },
    // 叉叉2
    clearcode() {
      this.selectedFilescode = [];
      this.file2 = "";
    },
    handleUploadParam(file) {
      this.jsonFile = file;
      console.log('file', file);

      if (file) {
        const reader = new FileReader();
        reader.onload = (evt) => {
          try {
            const parsedData = JSON.parse(evt.target.result);
            this.model_ParaIntro = parsedData;
            console.log('this.model_ParaIntro', this.model_ParaIntro);
          } catch (error) {
            console.error('JSON parsing error:', error);
          }
        };
        reader.readAsText(file.raw, 'UTF-8');
      }
    },

    beforeUpload7z(file) {
      // 检查是否为压缩文件类型
      if (!this.isValidFileType(file.name)) {
        this.$message.error("请上传压缩文件类型（.zip, .rar, .7z, .tar）");
        return false; // 阻止文件上传
      }
      return true;
    },
    handleUploadChange7z(file) {
      if (!this.isValidFileType(file.name)) {
        return;
      }
      // 清空已选择文件列表
      this.selectedFiles7z = [];

      // 将当前选择的文件添加到已选择文件列表
      this.selectedFiles7z.push(file);
      if (this.getIconForFileType(file.name) === "zip") {
        this.file1 = require("../../assets/model-add-icons/ZIP.png");
      }
      if (this.getIconForFileType(file.name) === "7z") {
        this.file1 = require("../../assets/model-add-icons/7z.png");
      }
      if (this.getIconForFileType(file.name) === "rar") {
        this.file1 = require("../../assets/model-add-icons/RAR.png");
      }
      if (this.getIconForFileType(file.name) === "tar") {
        this.file1 = require("../../assets/model-add-icons/TAR.png");
      }
    },
    isValidFileType(fileName) {
      const ext = fileName.split(".").pop().toLowerCase();
      const allowedExtensions = ["zip", "rar", "7z", "tar"];
      return allowedExtensions.includes(ext);
    },
    isValidCodeFile(fileName) {
      const ext = fileName.split(".").pop().toLowerCase();
      const allowedExtensions = ["py", "c"];
      return allowedExtensions.includes(ext);
    },
    getIconForFileType(fileName) {
      if (!fileName) return ""; // 避免出现undefined时的错误
      const ext = fileName.split(".").pop().toLowerCase();
      // return ext.toString()
      switch (ext) {
        case "zip":
          return "zip";
        case "rar":
          return "rar";
        case "7z":
          return "7z";
        case "tar":
          return "tar";
        default:
          return "zip"; // 默认文件图标
      }
    },
    getCodeFileType(fileName) {
      if (!fileName) return ""; // 避免出现undefined时的错误
      const ext = fileName.split(".").pop().toLowerCase();
      // return ext.toString()
      switch (ext) {
        case "py":
          return "py";
        case "c":
          return "c";
        default:
          return "py"; // 默认文件图标
      }
    },
    beforeUploadcode(file) {
      console.log("代码文件的名称" + file.name);
      if (!this.isValidCodeFile(file.name)) {
        this.$message.error("仅支持.py或者.c文件类型模型上传");
        return false;
      }
      this.file2 = require("../../assets/model-add-icons/代码3.png");
      return true;
    },
    async handleUploadChangecode(file) {
      if (!this.isValidCodeFile(file.name)) {
        return;
      }

      try {
        // 模拟异步操作
        await this.simulateAsyncOperation();
        // 清空已选择文件列表 保持里面只有一个
        this.selectedFilescode = [];
        // 将当前选择的文件添加到已选择文件列表
        this.selectedFilescode.push(file);

        this.file2 = require("../../assets/model-add-icons/代码3.png");

        if (this.getCodeFileType(file.name) === "py") {
          this.code_type = ".py";
        } else if (this.getCodeFileType(file.name) === "c") {
          this.code_type = ".c";
        }
      } catch (error) {
        console.error("Error during handleUploadChangecode:", error);
      }
    },
    simulateAsyncOperation() {
      return new Promise((resolve) => {
        setTimeout(resolve, 1000); // 模拟异步操作延迟
      });
    },
    handleEdit(row) {
      router.push({ path: "/1/m_d" });
      this.$emit("sign", row);
    },
    hidden_button() {
      if (this.left_hidden) {
        this.hidden__button = "扩大";
      } else {
        this.hidden__button = "缩小";
      }
      this.left_hidden = !this.left_hidden;
    },

    addKeyValue() {
      if (
        this.param_name &&
        this.param_explain &&
        this.param_defaultValue &&
        this.param_unit
      ) {
        this.model_ParaIntro.push({
          param_name: this.param_name,
          param_explain: this.param_explain,
          param_defaultValue: this.param_defaultValue,
          param_unit: this.param_unit,
          isEditing: false,
        });
        this.param_name = "";
        this.param_explain = "";
        this.param_defaultValue = "";
        this.param_unit = "";
      }
    },
    editKeyValue(index) {
      if (this.model_ParaIntro[index].isEditing) {
        // 保存编辑
        this.model_ParaIntro[index].isEditing = false;
      } else {
        // 进入编辑模式
        this.model_ParaIntro[index].isEditing = true;
      }
    },

    deleteKeyValue(index) {
      // this.form.model_ParaIntro.splice(index, 1);
      this.model_ParaIntro.splice(index, 1);
    },
    // 安全隐患(上传文件以及压缩包接口)
    async uploadFile_() {},

    disableUpload() {
      this.$message.info("请先填写好模型其它信息");
    },
    checkform(t) {
      if (!this.form.model_type) {
        if (t === 0) {
          this.$message.info("请选择模型类型");
        }
        return false;
      }
      if (!this.form.model_name) {
        if (t === 0) {
          this.$message.info("请填写模型名称");
        }
        return false;
      }
      if (!this.form.model_intro) {
        if (t === 0) {
          this.$message.info("请填写模型介绍");
        }
        return false;
      }
      // if (this.model_ParaIntro.length === 0) {
      //   if (t === 0) {
      //     this.$message.info("请填写参数信息");
      //   }
      //   return false;
      // }
      if (t === 0 && this.selectedFilescode.length === 0) {
        if (t === 0) {
          this.$message.info("请上传代码文件");
        }
        return false;
      }

      return true;
    },
    //加入提交时间 加入上传的文件数据 加入模型参数信息
    extendedForm() {
      this.form.save_time = dayjs().format("YYYY-MM-DD-HH:mm:ss");
      if (this.selectedFiles7z.length === 1) {
        this.form.model_compress = { ...this.selectedFiles7z[0] };
      } else {
        this.form.model_compress = "null";
      }
      if (this.selectedFilescode.length === 1) {
        // console.log("tet", this.selectedFilescode)
        this.form.model_file = { ...this.selectedFilescode[0] };
      } else {
        this.form.model_file = "null";
      }
      // let model_ParaIntro1 = null;
      // if (this.model_ParaIntro.length > 0) {
      //   model_ParaIntro1 = JSON.stringify(this.model_ParaIntro);
      // }
      // this.form.model_ParaIntro = model_ParaIntro1;
      // if(this.jsonFile !== null){
      //   this.form.params_file = this.jsonFile.raw
      // }

      if (this.limits) {
        this.IsPrivate = "No";
      }else {
        this.IsPrivate = "Yes"
      }
      this.form.IsPrivate = this.IsPrivate;
    },
    // 弹出等待提示框事件
    openMessageboxForWait() {
      this.$message({message: '正在进行模型验证，直到弹出添加成功后，即完成模型添加',
      center: true,
      duration: 0,
      
    });
    },
    async submitform() {
      if(!this.checkform(0)){
        return
      }
      //加入提交时间 加入上传的文件数据 加入模型参数信息
      this.extendedForm();
      this.$message({
          message: '正在进行模型验证，直到弹出添加成功后，即完成模型添加',
          center: true,
          duration: 3000,
        })
      // console.log(file); // 打印文件内容
      const formData = new FormData();
      formData.append("code_type", this.code_type);
      console.log("?!isprivate", this.IsPrivate)
      formData.append("IsPrivate", this.IsPrivate);
      formData.append("model_type", this.form.model_type);
      formData.append("model_name", this.form.model_name);
      formData.append("model_intro", this.form.model_intro);
      // formData.append('model_ParaIntro', this.model_ParaIntro);
      // formData.append('model_ParaIntro',this.form.model_ParaIntro);
      // formData.append("params_file", this.form.params_file);
      formData.append("model_file", this.selectedFilescode[0].raw);
      formData.append("username", this.username);
      if (this.selectedFiles7z.length > 0) {
        formData.append("attachment", this.selectedFiles7z[0].raw);
      }
      var formDataToJson = {};
      formData.forEach((value, key) => {
        formDataToJson[key] = value;
      });
      var form2 = JSON.stringify(formDataToJson);
      console.log("打印的表单");
      console.log(form2);
      try {
        const response = await fetch(this.baseUrl + "/model/addModel", {
          method: "POST",
          body: formData,
        });
        // this.openMessageboxForWait()

        
        if (response.ok) {
          const result = await response.json();
          if (result.code === 200) {
            console.log("打印结果\n" + JSON.stringify(result));
            this.$message.success(result.msg);
          } else {
            this.$message.error(result.msg);
          }
        } else {
          this.$message.error("上传失败");
        }
      } catch (error) {
        console.error("上传失败", error);
        this.$message.error("上传失败");
      }
    },
  },
};
</script>


<style lang="scss" scoped>
.waitTool {
  display: flex;
  margin: 0px;
}
.container {
  display: flex; /* 使用 Flexbox 布局 */
  width: 100%; /* 设置容器宽度 */
  overflow: hidden; /* 隐藏容器内容溢出的部分，不显示整体滚动条 */
}

.column {
  //border: 1px solid #ccc; /* 添加轮廓样式 */
  //margin: 5px; /* 缝隙 */
  font-size: 14px;
  font-weight: 500;
  color: #606266;
}

.column-left {
  width: 400px; /* 左侧栏固定宽度 */
  background-color: white; /* 左侧栏背景色 */
  height: 100%;
  overflow: auto;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
  color: #606266;
}

.column-right {
  margin-left: 1%;
  //border-left: 1px solid #DCDFE6;
  flex: 1; /* 占用剩余空间 */
  background-color: white; /* 右侧栏背景色 */
  //height: 100vh;
  height: 100vh;
  max-height: 82vh;
  overflow: scroll;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
  color: #606266;
  //padding: 20px;

  div {
    img {
      width: 60px;
      height: 60px;
    }
  }
  .column-right__form {
    padding: 10px;
    margin-top: 10px;
    //前两个div
    .column-right__form__div {
      .el-textarea {
        flex: 1;
        //display: flex;
        margin-right: 36%;

        width: 100vw;
      }
    }
    div {
      label {
        width: 100px;
      }
      button {
        //background-color: white;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        color: #606266;
        width: 80px;
        height: 30px;
      }
      button:hover {
        cursor: pointer;
      }
    }
    div:not(:last-child) {
      margin-bottom: 30px;
    }
  }
  .column-right-bottom__button {
    display: flex;
    justify-content: center;
    padding: 36px;
    //>button{
    //  background-color: white;
    //  border-radius: 4px;
    //  border: 1.2px solid #409EFF;
    //  color: #606266;
    //  width: 80px;
    //  height: 30px;
    //  //background-color: #ECF5FF;
    //}
    button {
      border: 1.2px solid #409eff;
      width: 80px;
    }
    button:first-child {
      margin-right: 20px;
    }
    button:hover {
      cursor: pointer;
    }
  }
}

.column-left__title {
  display: flex;
  justify-content: center;
  //border-bottom: 1px solid  #DCDFE6;
  border-radius: 4px;
  padding: 8px;
}

.column-left__modellist {
  display: flex;
  flex-direction: column;
  //justify-content: center;
  position: relative;
  //align-items: center;
  height: 70vh;
  //margin: 5px;
}
.column-left__modellist__button {
  //position: absolute;
  //bottom: 1vh;
  //float: top;
  //left: 0;
  background-color: white;
  width: 40px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  margin-bottom: 10px;
}
.column-left__modellist__button:hover {
  cursor: pointer;
}

.column-right__title {
  display: flex;
  justify-content: center;
  //border-bottom: 1px solid  #DCDFE6;
  border-radius: 4px;
  padding: 8px;
}
.column-right__param {
  //border: 1px solid  #DCDFE6;
  border-radius: 4px;
  max-height: 100%;
  //font-size: 14px;
  //font-weight: 500;
  //color: #606266;
}

.param__area {
  flex: 1;
  width: 100vw;
  margin-top: 0.625em;
  display: flex;
  flex-direction: column;
  //margin-top: 0.625em;
  //margin-left: 10%;
  margin-right: 30%;
}

.el-table__row {
  input {
    width: 100%;
    border-radius: 4px;
    border: 1px solid #cccccc;
    height: auto;
    text-align: center;
  }
}
//.el-table .cell{
//  text-align: center;
//}

.download_select{
  width: 500px;

}

.upload-json{
  width: 200px;
  height:200px;
  display: flex;
  justify-content: center;
  align-items: center;
  span{
    font-size: 14px;
    color: #878889;
  }

  border-radius: 5px;
  border: 3px dashed #e4e7ed;

}

.resetUpload{
  //width: 50px;
  //height: 100px;
  font-size: 12px;
  border-radius: 5px;
  background-color: #409EFF;
  color: white;
}
</style>
